<template>
<q-page class="q-pa-md  row justify-center">

  <div style="max-width:595px;min-width:200px" class="col-grow" >
    <q-card v-for="item in quoteInfoList" :key="item.qi_id" style="border-radius:10px" class="shadow-12">

      <q-expansion-item default-opened header-class="q-pa-none" class="q-pa-none">
          <template v-slot:header>
              <div class="column full-width q-pt-sm">
                  <div class="q-px-md full-width row items-center justify-between">
                      <div class="row items-center justify-between no-wrap">
                          <q-img v-if="item.isCommercial==1" src="~assets/icons/commercial.png" contain style="width:25px"></q-img>
                          <q-img v-if="item.isCommercial!=1" src="~assets/icons/uncommercial.png" contain style="width:25px"></q-img>
                          <div class="text-teal-6 q-ma-sm text-h6 text-bold">{{item.name}}</div>

                      </div>

                  </div>

                  <div class="q-px-md q-pl-lg q-py-sm full-width row items-center wrap ">

                      <!-- <q-badge v-if="item.isCommercial==1" outline color="green" label="可商用" />
                      <q-badge v-if="item.isCommercial!=1" outline color="grey-6" label="非商用" /> -->

                      <q-badge class="q-ml-sm text-bold" outline color="amber" :label="item.resolution" />
                      <q-badge class="q-ml-sm" outline color="amber" :label="item.aspectRatio" />
                      <div class="row items-center q-ml-sm">
                          <q-icon name="mdi-clock-time-twelve-outline" color="amber"></q-icon>
                          <span class="text-caption  q-ml-xs">时长：{{item.duration}}</span>
                      </div>
                  </div>
                  <div class="q-px-md q-pl-lg q-py-sm full-width row items-center wrap ">

                    <q-badge class="q-ml-sm" outline color="primary" :label="item.typename" />
                    <div class="row items-center q-ml-sm">
                        <q-icon name="mdi-clock-time-twelve-outline" color="teal-6"></q-icon>
                        <span class="text-caption q-ml-xs ">项目周期：{{stime}}-{{etime}}</span>
                    </div>
                </div>

              </div>

          </template>

          <q-card class=" " style="border-radius:10px">
            <q-card-section class="q-py-sm">
                <q-expansion-item  header-class="q-pa-none" class="q-pa-none">
                    <template v-slot:header>
                        <tips-title class="full-width" title="前期制作" :isCaption="true" :capTitle="'合计：￥'+item.preTotal+'.00'" capClass="text-amber-6 text-bold" tipclass="bg-amber-6" lineColor="amber"></tips-title>
                    </template>
                    <q-card class="q-px-sm">
                        <q-list bordered class="rounded-borders">
                            <q-expansion-item :disable="!item.CJ_remark.length>0">
                                <template v-slot:header>

                                    <q-item-section>
                                        策划及脚本
                                    </q-item-section>

                                    <q-item-section side>
                                        {{ item.CJ }}.00
                                    </q-item-section>
                                </template>

                                <q-card>


                                    <q-card-section class="q-pt-none  row wrap ">
                                      <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                            <div style="max-width:250px;white-space:pre-line">
                                              {{ item.CJ_remark }}
                                            </div>


                                      </div>
                                  </q-card-section>
                                </q-card>
                            </q-expansion-item>

                            <q-separator inset />
                            <q-expansion-item :disable="!item.SR_remark.length>0">
                                <template v-slot:header>

                                    <q-item-section>
                                        摄制人员费
                                    </q-item-section>

                                    <q-item-section side>
                                        {{ item.SR }}.00
                                    </q-item-section>
                                </template>

                                <q-card>
                                    <q-card-section class="q-pt-none  row wrap ">
                                        <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                              <span style="max-width:250px;white-space:pre-line">
                                                {{ item.SR_remark }}
                                              </span>


                                        </div>
                                    </q-card-section>
                                </q-card>
                            </q-expansion-item>

                            <q-separator inset />
                            <q-expansion-item :disable="!item.QD_remark.length>0">
                                <template v-slot:header>

                                    <q-item-section>
                                        器材灯光费
                                    </q-item-section>

                                    <q-item-section side>
                                        {{ item.QD }}.00
                                    </q-item-section>
                                </template>

                                <q-card>

                                    <q-card-section class="q-pt-none  row wrap ">
                                      <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                            <div style="max-width:250px;white-space:pre-line">
                                              {{ item.QD_remark }}
                                            </div>


                                      </div>
                                  </q-card-section>
                                </q-card>
                            </q-expansion-item>

                            <q-separator inset />
                            <q-expansion-item :disable="!item.CZ_remark.length>0">
                                <template v-slot:header>

                                    <q-item-section>
                                        场地置景费
                                    </q-item-section>

                                    <q-item-section side>
                                        {{ item.CZ }}.00
                                    </q-item-section>
                                </template>

                                <q-card>
                                  <q-card-section class="q-pt-none  row wrap ">
                                    <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                          <div style="max-width:250px;white-space:pre-line">
                                            {{ item.CZ_remark }}
                                          </div>


                                    </div>
                                </q-card-section>

                                </q-card>
                            </q-expansion-item>

                            <q-separator inset />
                            <q-expansion-item :disable="!item.YD_remark.length>0">
                                <template v-slot:header>

                                    <q-item-section>
                                        演员道具费
                                    </q-item-section>

                                    <q-item-section side>
                                        {{ item.YD }}.00
                                    </q-item-section>
                                </template>

                                <q-card>
                                  <q-card-section class="q-pt-none  row wrap ">
                                    <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                          <div style="max-width:250px;white-space:pre-line">
                                            {{ item.YD_remark }}
                                          </div>


                                    </div>
                                </q-card-section>

                                </q-card>
                            </q-expansion-item>

                            <q-separator inset />
                            <q-expansion-item :disable="!item.FZ_remark.length>0">
                                <template v-slot:header>

                                    <q-item-section>
                                        服装造型费
                                    </q-item-section>

                                    <q-item-section side>
                                        {{ item.FZ }}.00
                                    </q-item-section>
                                </template>

                                <q-card>
                                  <q-card-section class="q-pt-none  row wrap ">
                                    <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                          <div style="max-width:250px;white-space:pre-line">
                                            {{ item.FZ_remark }}
                                          </div>


                                    </div>
                                </q-card-section>

                                </q-card>
                            </q-expansion-item>
                            <q-separator inset />
                        </q-list>
                    </q-card>
                </q-expansion-item>

            </q-card-section>
            <q-card-section class="q-py-sm">
                <q-expansion-item  header-class="q-pa-none" class="q-pa-none">
                    <template v-slot:header>
                        <tips-title class="full-width" title="后期制作" tipclass="bg-blue-6" lineColor="blue" :isCaption="true" :capTitle="'合计：￥ '+item.postTotal+'.00'" capClass="text-blue-6 text-bold"></tips-title>
                    </template>
                    <q-card class=" q-px-sm">
                        <q-expansion-item :disable="!item.JJ_remark.length>0">
                            <template v-slot:header>

                                <q-item-section>
                                    剪辑
                                </q-item-section>

                                <q-item-section side>
                                    {{ item.JJ }}.00
                                </q-item-section>
                            </template>

                            <q-card>
                              <q-card-section class="q-pt-none  row wrap ">
                                <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                      <div style="max-width:250px;white-space:pre-line">
                                        {{ item.JJ_remark }}
                                      </div>


                                </div>
                            </q-card-section>

                            </q-card>
                        </q-expansion-item>
                        <q-separator inset />
                        <q-expansion-item :disable="!item.TS_remark.length>0">
                            <template v-slot:header>

                                <q-item-section>
                                    调色
                                </q-item-section>

                                <q-item-section side>
                                    {{ item.TS }}.00
                                </q-item-section>
                            </template>

                            <q-card>
                              <q-card-section class="q-pt-none  row wrap ">
                                <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                      <div style="max-width:250px;white-space:pre-line">
                                        {{ item.TS_remark }}
                                      </div>


                                </div>
                            </q-card-section>

                            </q-card>
                        </q-expansion-item>
                        <q-separator inset />
                        <q-expansion-item :disable="!item.YS_remark.length>0">
                            <template v-slot:header>

                                <q-item-section>
                                    声音设计
                                </q-item-section>

                                <q-item-section side>
                                    {{ item.YS }}.00
                                </q-item-section>
                            </template>

                            <q-card>
                              <q-card-section class="q-pt-none  row wrap ">
                                <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                      <div style="max-width:250px;white-space:pre-line">
                                        {{ item.YS_remark }}
                                      </div>


                                </div>
                            </q-card-section>

                            </q-card>
                        </q-expansion-item>
                        <q-separator inset />
                        <q-expansion-item :disable="!item.SB_remark.length>0">
                            <template v-slot:header>

                                <q-item-section>
                                    视觉包装
                                </q-item-section>

                                <q-item-section side>
                                    {{ item.SB }}.00
                                </q-item-section>
                            </template>

                            <q-card>
                              <q-card-section class="q-pt-none  row wrap ">
                                <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                      <div style="max-width:250px;white-space:pre-line">
                                        {{ item.SB_remark }}
                                      </div>


                                </div>
                            </q-card-section>

                            </q-card>
                        </q-expansion-item>
                        <q-separator inset />
                        <q-expansion-item :disable="!item.DT_remark.length>0">
                            <template v-slot:header>

                                <q-item-section>
                                    动画特效
                                </q-item-section>

                                <q-item-section side>
                                    {{ item.DT }}.00
                                </q-item-section>
                            </template>

                            <q-card>
                              <q-card-section class="q-pt-none  row wrap ">
                                <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                      <div style="max-width:250px;white-space:pre-line">
                                        {{ item.DT_remark }}
                                      </div>


                                </div>
                            </q-card-section>

                            </q-card>
                        </q-expansion-item>
                        <q-separator inset />
                        <q-expansion-item :disable="!item.PY_remark.length>0">
                            <template v-slot:header>

                                <q-item-section>
                                    配音费
                                </q-item-section>

                                <q-item-section side>
                                    {{ item.PY }}.00
                                </q-item-section>
                            </template>

                            <q-card>
                              <q-card-section class="q-pt-none  row wrap ">
                                <div class="q-pa-sm bg-blue-1 full-width text-caption text-weight-light row text-wrap" style="border-radius:10px;">

                                      <div style="max-width:250px;white-space:pre-line">
                                        {{ item.PY_remark }}
                                      </div>


                                </div>
                            </q-card-section>

                            </q-card>
                        </q-expansion-item>
                        <q-separator inset />

                    </q-card>
                </q-expansion-item>

            </q-card-section>
            <q-card-section class="q-py-sm">
                <q-expansion-item default-opened header-class="q-pa-none" class="q-pa-none">
                    <template v-slot:header>
                        <tips-title class="full-width" title="其他" tipclass="bg-cyan-6" lineColor="cyan-6" :isCaption="true" :capTitle="'合计：￥ '+item.vatTotal+'.00'" capClass="text-cyan-6 text-bold"></tips-title>
                    </template>
                    <q-card class=" q-px-sm">
                        <q-expansion-item disable>
                            <template v-slot:header>

                                <q-item-section>
                                    增值税{{item.vat}}%
                                </q-item-section>

                                <q-item-section side>
                                    {{ item.vatTotal }}.00
                                </q-item-section>
                            </template>

                            <q-card>
                                <q-card-section class="q-pt-none  ">
                                    <div class="q-pa-sm bg-blue-1 text-caption full-width  text-weight-light" style="border-radius:10px">

                                    </div>
                                </q-card-section>
                            </q-card>
                        </q-expansion-item>
                        <q-separator inset />

                    </q-card>
                </q-expansion-item>

            </q-card-section>

        </q-card>

      </q-expansion-item>
      <q-card-section class="row justify-end text-subtitle1 text-bold text-teal-6 ">
          合计：￥ {{ item.costTotal }}.00
      </q-card-section>

  </q-card>

  <q-card v-show="!isLoading" style="border-radius:10px" class="q-my-md shadow-12">
      <q-card-section>
          <q-list separator class="q-my-xs" style="border-radius:10px">
              <q-item clickable v-ripple class="q-pa-none row flex-center no-wrap">
                  <div class="col-4  column q-px-md " :class="titleClass">
                      <span class="text-body2">供应商：</span>
                      <span class="text-caption text-weight-light">Vendor</span>
                  </div>
                  <div class="col-grow row flex-center">
                      <span>武汉一方映画文化传媒有限公司</span>

                  </div>

              </q-item>
              <q-item clickable v-ripple class="q-pa-none row flex-center no-wrap">
                <div class="col-4  column q-px-md " :class="titleClass">
                    <span class="text-body2">邮箱：</span>
                    <span class="text-caption text-weight-light">E-Mail</span>
                </div>
                <div class="col-grow row flex-center">
                    <!-- <span>main@yfyh.cc</span> -->
                    <a href="mailto:main@yfyh.cc">main@yfyh.cc</a>
                </div>

            </q-item>
              <q-item clickable v-ripple class="q-pa-none row flex-center no-wrap">
                  <div class="col-4  column q-px-md" :class="titleClass">
                      <span class="text-body2">报价人：</span>
                      <span class="text-caption text-weight-light">Content</span>
                  </div>
                  <div class="col-grow row flex-center">
                      <span @click="handlePhone">徐文涛17371251725</span>

                  </div>

              </q-item>
              <q-item clickable v-ripple class="q-pa-none row flex-center no-wrap">
                  <div class="col-4  column q-px-md " :class="titleClass">
                      <span class="text-body2">日期：</span>
                      <span class="text-caption text-weight-light">Date</span>
                  </div>
                  <div class="col-grow row flex-center">
                      <span>{{qTime}}</span>

                  </div>

              </q-item>
              <q-item clickable v-ripple class="q-pa-none row flex-center no-wrap">
                <div class="col-4  column q-px-md " :class="titleClass">
                    <span class="text-body2">发票：</span>
                    <span class="text-caption text-weight-light">Invoice</span>
                </div>
                <div class="col-grow row flex-center">
                    <span>可开具发票</span>

                </div>

            </q-item>

          </q-list>
      </q-card-section>

  </q-card>
  </div>

    <q-page-sticky position="bottom-right" :offset="[50,50]">
        <q-fab label="操作" vertical-actions-align="left" class="z-max bg-white shadow-7 text-primary" icon="mdi-swap-horizontal" direction="up" padding="6px">
            <q-fab-action color="primary" @click="handleShare" icon="share" label="分享" />
            <q-fab-action color="secondary" icon="edit" label="修改" />
            <q-fab-action color="orange" icon="add" label="新增项目" />
            <q-fab-action color="accent" icon="add" label="新增版本" />
            <q-fab-action @click="handleExport" color="blue" icon="mdi-export" label="导出" />
        </q-fab>

    </q-page-sticky>
    <q-inner-loading :showing="isLoading">
        <q-spinner-cube color="primary" size="50px" class="q-mb-sm" />
        数据加载中……
    </q-inner-loading>
</q-page>
</template>

<script>
import {
    loadQuoteInfo,
    downloadQuotation
} from "assets/api/app"
export default {
    name: '',
    data() {
        return {
            titleClass: "",
            q_id: '',
            quoteInfoList: [],
            qTime: 0,
            isLoading: true,
            quoteInfo: null

        }
    },
    mounted() {
        let q_id = this.$route.params.q_id;
        this.q_id = q_id
        this.handleLoadQuoteInfo()
    },
    methods: {
        handleLoadQuoteInfo() {
            loadQuoteInfo({
                q_id: this.q_id
            }).then(res => {
                console.log(res.data.data);
                let data = res.data.data;
                if (data.length > 0) {
                    this.qTime = this.$moment(data[0][0].qTime, 'x').format("YYYY/MM/DD")
                    this.stime = this.$moment(data[0][0].stime, 'x').format("YYYY/MM/DD")
                    this.etime = this.$moment(data[0][0].etime, 'x').format("YYYY/MM/DD")

                    this.quoteInfoList = data[1]
                    this.quoteInfo = data[0][0]
                    this.isLoading = false
                } else {

                }

            })
        },
        handleShare() {
            let url = 'https://oa.yfyh.cc/quotation/' + this.q_id
            let msg = `一方映画请您查看《${this.quoteInfo.name}》项目报价单\n链接：${url}\n`;
            this.$copyText(msg)
                .then(() => {
                    this.$message.success('复制链接成功！')
                })
                .catch(() => {
                    this.$message.error('复制链接失败！')
                })
        },
        handlePhone(){
          window.location.href = "tel:17371251725";
        },
        handleExport() {
            this.$q.loading.show()
            let reqData = this.quoteInfoList[0]
            reqData.qTime = this.qTime
            reqData.stime = this.stime
            reqData.etime = this.etime
            downloadQuotation(({
                data: reqData
            })).then((res) => {
                if (res.data.code == 1) {
                    var save_link = document.createElement("a");
                    save_link.href = this.GLOBAL.serveurl + res.data.dataurl;
                    save_link.download = res.data.filename;

                    var event = document.createEvent("MouseEvents");
                    event.initMouseEvent(
                        "click",
                        true,
                        false,
                        window,
                        0,
                        0,
                        0,
                        0,
                        0,
                        false,
                        false,
                        false,
                        false,
                        0,
                        null
                    );
                    save_link.dispatchEvent(event);
                    this.$q.loading.hide()

                }else{
                  this.$q.loading.hide()
                }
            });
        },
    }
}
</script>

<style>

</style>
